<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>键盘事件</title>
    <script src="../../JS/vue.js"></script>
  </head>
  <body>
    <!-- 
       1、Vue中的常用的按键别名
          回车 =》 enter
          删除 =》 delete(捕获“删除”和“退格键")
          退出 =》 esc
          空格 =》 space
          换行 =》 tab (特殊，必须配合keydown去使用)
          上  =》 up
          下  =》 down
          左  =》 left
          右  =》 right
       
       2、Vue未提供别名的案件，可以使用按键原始key只取绑定,但注意要转为
       kebab-case(短横线命名)
       
       3、系统修饰符(用法特殊):ctrl alt shift meta(win)
              (1)配合keyup使用：按下修饰键的同时，在按下其他按键，随后释放其他键，事件才触发。
              (2)配合keydown使用:正常触发事件
       4、也可以使用keyCode去指定具体的按键(不推荐)
       5、Vue.config.keyCodes.自定义的键名 = 键码，可以去定制按键别名       

        
     -->
    <div id="root">
      <h2>欢迎大家</h2>
      <input type="text" @keyup="showInfo" placeholder="按回车提示输入" />
    </div>
    <script>
      Vue.config.productionTip = false //阻止 vue 在启动时产生提示
      const vm = new Vue({
        el: '#root',
        data: {
          name: '小莫',
        },
        methods: {
          showInfo(e) {
            // e.code 更加精准
            // e.key
            console.log(e.code)
          },
        },
      })
    </script>
  </body>
</html>
